<!DOCTYPE html><!--  Last Published: Mon Feb 19 2024 01:36:14 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="6581085f441714e1dbf730af" data-wf-site="657c661418a503e0b43c9905">
<head>
  <meta charset="utf-8">
  <title>cardzhuye</title>
  <meta content="cardzhuye" property="og:title">
  <meta content="cardzhuye" property="twitter:title">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/shikais-stunning-site.webflow.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
  <style>
.zhuyezhuti .zhuyezhutitext {
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 显示省略号 */
    list-style-type: none; /* 可选：移除列表标记 */
}
</style>
</head>
<body class="body-3">
  <div id="appzhutiye" class="vue-root">
    <section class="section-5">
      <div data-animation="default" data-collapse="small" data-duration="400" data-easing="ease-in" data-easing2="ease" role="banner" class="navbar-3 w-nav">
        <div class="container-13 w-container">
          <div class="div-block-6">
            <form action="/search" class="search w-form"><input class="search-input w-input" autofocus="true" maxlength="256" name="query" v-model="searchQuery" placeholder="搜索主题" type="search" id="search" required=""><img src="images/sousuoanniu.png" loading="lazy" alt="" class="image-3"></form>
          </div>
          <nav role="navigation" class="nav-menu-3 w-nav-menu">
            <div data-hover="false" data-delay="0" class="w-dropdown">
              <div class="yonghuxinxi w-dropdown-toggle">
                <div class="div-block-9"><img src="images/xinzengzhuti.svg" loading="lazy" width="36" alt=""></div>
              </div>
              <nav class="dropdown-list w-dropdown-list">
                <a data-w-id="beed6ff7-a277-0fae-3364-3b0bb5802911" href="#" class="dropdown-link yonghu_xuanze w-dropdown-link">新建主题</a>
              </nav>
            </div>
            <div data-hover="false" data-delay="0" class="w-dropdown">
              <div class="yonghuxinxi w-dropdown-toggle">
                <div class="div-block-9"><img src="images/weixintouxiang_lsk.jpg" loading="lazy" height="33" alt="" width="33" srcset="images/weixintouxiang_lsk-p-500.jpg 500w, images/weixintouxiang_lsk.jpg 516w" sizes="(max-width: 767px) 100vw, 33px" class="image-2"></div>
              </div>
              <nav class="dropdown-list w-dropdown-list">
                <a href="personal.html" class="dropdown-link yonghu_xuanze w-dropdown-link">个人中心</a>
                <a href="index.html" class="yonghu_xuanze w-dropdown-link">官网首页</a>
                <a href="loginorregistry.html" class="yonghu_xuanze w-dropdown-link">退出登录</a>
              </nav>
            </div>
          </nav>
          <div class="w-nav-button">
            <div class="icon-2 iconzhnakai w-icon-nav-menu"></div>
          </div>
        </div>
      </div>
      <div class="w-layout-blockcontainer container-14 w-container">
        <a href="#" class="link-block w-inline-block">
          <div class="text-block-4">我的主题<br>‍</div>
        </a>
        <div data-hover="false" data-delay="0" class="w-dropdown">
          <div class="w-dropdown-toggle"><img src="images/paixu.svg" loading="lazy" width="15" alt=""></div>
          <nav class="paixuzhuti w-dropdown-list">
            <a v-on:click="sortByEditTime()" href="#" class="dropdown-link-2 w-dropdown-link">修改时间</a>
            <a v-on:click="sortByCreateTime()" href="#" class="dropdown-link-3 w-dropdown-link">创建时间</a>
            <a v-on:click="sortByOrderFromLocalStorage()" href="#" class="w-dropdown-link">自定义</a>
          </nav>
        </div>
      </div>
    </section>
    <section>
      <div class="w-layout-blockcontainer container-25 w-container">

        <div id="breadcrumb" class="breadcrumb">
<!--          <span class="paragraph-6" @click="resetToRoot()" style="cursor:pointer;" @dragover.prevent-->
<!--                @drop="handleBreadcrumbDrop($event, targetCrumb)" foldId="00000000000">所有主题</span>-->
<!--          <a href="#" @click="resetToRoot()">首页</a>-->
          <!-- 使用Vue动态渲染面包屑导航项 -->
          <span v-for="(folder, index) in breadcrumbList" :key="index"  @dragover.prevent
                @drop="handleDrop(crumb, $event)">
    <span v-if="index!=0"> / </span>
    <a href="#" @click="navigateToFolder(index)" :foldId="folder.topicid" @dragover.prevent @drop="handleBreadcrumbDrop($event, targetCrumb)">{{ folder.topictitle }}</a>
  </span>
        </div>
      </div>
    </section>
    <section class="section-4" id="dragSection">
      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">
        <div class="div-block-7">
          <div v-bind:title="topic.topictitle" v-for="topic in filteredTopics" class="zhuyezhuti" draggable="true" @dragstart="dragStart($event, topic,'folder')">
            <img src="images/wenjianjia.svg" loading="lazy" width="22" alt="" class="image-8">
            <div v-bind:title="topic.topictitle" v-bind:id="topic.topicid" v-on:click="goToCardPerform(topic)" class="zhuyezhutitext">{{topic.topictitle}}</div>
            <div data-hover="false" data-delay="0" class="dropdown_yonghu w-dropdown">
              <div class="yonghu_zhedie w-dropdown-toggle"><img src="images/gengduo.png" loading="lazy" width="20" alt="" class="image-6"></div>
              <nav class="yonghuxialazu w-dropdown-list">
                <a v-on:click="removeTopic(topic)" href="#" class="w-dropdown-link">删除</a>
                <a v-on:click="openRenameDialog(topic)" href="#" class="w-dropdown-link">重命名</a>
                <a v-on:click="childrenTopic(topic)" href="#" class="w-dropdown-link">子文件夹</a>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </section>
<!--    卡片渲染-->
    <section class="section-cards">
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--      <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--        <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--        <div class="actions">-->
<!--          <button>Edit</button>-->
<!--          <button>Delete</button>-->
<!--          <button>View</button>-->
<!--        </div>-->
<!--      </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div> <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--      <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--        <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--        <div class="actions">-->
<!--          <button>Edit</button>-->
<!--          <button>Delete</button>-->
<!--          <button>View</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="w-layout-blockcontainer container-15 w-container" @dragover.prevent @drop="dropTopic">-->
<!--        <div class="card" draggable="true" @dragstart="dragStart($event, topic)">-->
<!--          <p>This is a brief description of the flashcard.This is a brief description of the flashcard</p>-->
<!--          <div class="actions">-->
<!--            <button>Edit</button>-->
<!--            <button>Delete</button>-->
<!--            <button>View</button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

      <!-- Repeat for more cards -->
    </section>


    <section class="section-cards" >
      <div class="w-layout-blockcontainer container-15 w-container" >
        <div  v-for="card in currentCards" :key="card.id" class="card" draggable="true" @dragstart="dragStart($event, card,'card')">
          <!-- 使用 v-for 指令遍历 currentCards 数组，并为每张卡片渲染内容 -->
            <p>{{ card.front }}</p>
              <div class="actions">
                <button>Edit</button>
                <button>Delete</button>
                <button>View</button>
              </div>
            </div>
          </div>
    </section>

    <div class="w-embed"><template>
        <!--  ... 其他代码 ...  -->
        <div v-if="showRenameDialog" class="modal-overlay-xiugai">
          <div class="modal-xiugai">
            <input v-model="newName" placeholder="请输入新名称">
            <button @click="renameTopic">确认</button>
            <button @click="cancelRename">取消</button>
          </div>
        </div>
      </template></div>
    <section class="section-6">
      <div class="w-layout-blockcontainer w-container"></div>
    </section>
    <section></section>
    <div class="div-block-11">
      <div class="div-block-12">
        <h6 class="heading">新建文件夹</h6><img src="images/取消.svg" loading="lazy" width="34" data-w-id="2e17eddb-fa0f-5925-f459-6feab4f3b46c" alt="" class="image-7">
        <div class="form-block-4 w-form">
          <form id="email-form" name="email-form" data-name="Email Form" method="get" class="form-4" data-wf-page-id="6581085f441714e1dbf730af" data-wf-element-id="2e17eddb-fa0f-5925-f459-6feab4f3b46e">
            <div class="text-block-5">名称：</div><input class="text-field-3 w-input" maxlength="256" name="xinzengzhuti" data-name="xinzengzhuti" v-model="newTopicName" placeholder="请输入名称" type="text" id="xinzengzhuti" required="">
            <div><img src="images/031_确定.svg" loading="lazy" v-on:click="addNewTopic()" alt="" width="50" class="image-9"></div>
          </form>
          <div class="w-form-done">
            <div>Thank you! Your submission has been received!</div>
          </div>
          <div class="w-form-fail">
            <div>Oops! Something went wrong while submitting the form.</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <button id="syncButton" style="position: fixed; bottom: 20px; right: 20px; z-index: 100; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer;">
    同步数据
  </button>


  <div class="w-embed w-script">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="http://43.136.220.136/static/Sortable.min.js"></script>
    <script src="http://43.136.220.136/static/vuedraggable.umd.min.js"></script>
    <script src="js/cardzhuye-vue0307.js"></script>
    <style>
.zhuyezhuti .zhuyezhutitext {
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 显示省略号 */
    list-style-type: none; /* 可选：移除列表标记 */
}
.w-embed {
  display: contents;
}
.modal-overlay-xiugai {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-xiugai {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.w-embed {
  display: contents;
}
.modal-xiugai {
    z-index: 3!important
}
.container-16 .zhuyezhuti {
    z-index: -1!important
}
/* Zhuyezhuti */
.section-4 .div-block-7 .zhuyezhuti{
 width:152px;
 min-height:34px;
 border-style:none;
 box-shadow:6px 6px 20px 1px rgba(0,0,0,0.2);
 transform:translatex(0px) translatey(0px);
}
/* Image 8 */
.section-4 .zhuyezhuti .image-8{
 min-height:33px;
 left:13px;
 right:auto !important;
}
/* Zhuyezhutitext */
.section-4 .zhuyezhuti .zhuyezhutitext{
 position:relative;
 left:14px;
 top:0px;
 padding-left:0px;
 font-size:11px;
}
/* Dropdown yonghu */
.section-4 .zhuyezhuti .dropdown_yonghu{
 width:10px;
 left:120px;
 right:auto !important;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 height:26px;
 top:4px;
 bottom:auto !important;
}
/* Image */
.section-4 .yonghu_zhedie img{
 position:relative;
 top:3px;
 width:70%;
 left:4px;
}
/* Image */
#appzhutiye .section-4 .w-container .div-block-7 .zhuyezhuti .dropdown_yonghu .yonghu_zhedie img{
 bottom:auto !important;
 right:auto !important;
}
/* Zhuyezhutitext */
#appzhutiye .section-4 .w-container .div-block-7 .zhuyezhuti .zhuyezhutitext{
 width:82% !important;
}
/* Yonghu zhedie */
.section-4 .zhuyezhuti .yonghu_zhedie{
 margin-left:0px;
 margin-right:0px;
 top:-1px;
 bottom:auto !important;
 left:10px;
 right:auto !important;
}
/* Navigation */
.div-block-7 .zhuyezhuti nav{
 top:25px;
 box-shadow:5px 7px 21px 5px rgba(188,188,188,0.44);
 width:79px;
 min-width:79px;
}
/* Navigation */
#appzhutiye .section-4 .w-container .div-block-7 .zhuyezhuti .dropdown_yonghu nav{
 bottom:auto !important;
}
/* Dropdown link */
.div-block-7 .zhuyezhuti .w-dropdown-link{
 border-bottom-style:solid;
 border-bottom-color:rgba(34,34,34,0.08);
 border-bottom-width:1px;
}
/* Navigation */
.w-nav-menu .w-dropdown nav{
 left:-29px;
 top:37px;
 box-shadow:2px 2px 6px 0px #d6d6d6;
}
/* Navigation */
.section-5 .w-nav .w-container .w-nav-menu .w-dropdown nav{
 right:auto !important;
 bottom:auto !important;
}
/* Section 5 */
.section-5{
 z-index:1;
}
/* Input */
#appzhutiye .modal-xiugai input{
 border-style:none;
 box-shadow:0px 1px 3px 0px #b7b7b7;
}
/* Navigation */
.div-block-7 .zhuyezhuti nav{
  z-index:1000;
  position:static;
}
</style>

    <!--    卡片列表渲染 -->
    <style>

      /* 容器样式，使用 flexbox 实现横向排列 */
      .container-15 {
        display: flex;
        flex-wrap: wrap;
        gap: 20px; /* 设置固定间隔 */

      }

      /* 卡片样式 */
      .card {
        width: 200px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        background-color: #fff;
      }

      /* 卡片文本样式 */
      .card p {
        height: calc(100% - 20px); /* 留出底部按钮空间 */
        overflow: hidden; /* 隐藏超出的文本 */
        position: relative;
      }

      .card p::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 20px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
      }

      /* 按钮样式 */
      .actions {
        position: absolute;
        bottom: 10px;
        right: 10px;
        display: none;
      }

      .card:hover .actions {
        display: block;
      }

      #appzhutiye .section-cards{
        display:flex;
        flex-wrap:wrap;
        clear:none;
        opacity:1;
        flex-direction:row;
      }
      /* 查询页面容器样式 */
      div[v-show="activeComponent === 'query'"] {
        padding: 20px;
      }

      /* 搜索栏样式 */
      .search-container {
        margin-bottom: 20px;
      }

      .search-container input {
        padding: 10px;
        margin-right: 10px;
        width: calc(100% - 120px); /* 留出按钮的空间 */
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .search-container button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      /* 表格样式 */
      .results-container table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
      }

      .results-container th,
      .results-container td {
        padding: 10px;
        border-bottom: 1px solid #ddd;
      }

      /* 鼠标悬浮在行上时的背景颜色 */
      .results-container tr:hover {
        background-color: #f5f5f5;
      }

      /* 表头的样式 */
      .results-container th {
        background-color: #f8f8f8;
      }

    </style>

  </div>
  <div class="w-embed"></div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=657c661418a503e0b43c9905" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
</body>
</html>